<template>
  <div>
    <ul>
      <li>课程ID: {{ $route.query.id }}</li>
      <li>课程名称: {{ $route.query.name }}</li>
      <li>课程介绍: {{info}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CourseItem',
  data () {
    return {
      info: ''
    }
  },
  /* 
  问题: 当重新获取到当前路由, 没有销毁重新创建=> mounted不会重新执行, 请求就不会重新执行, Info就没有更新
  分析: 需要让请求的操作在初始化和id参数更新时, 都会执行
  解决: 监视$route  (重新跳转到当前路由, 产生的是一个新的路由对象) 
  */
  // mounted () {
  //   const id = this.$route.params.id
  //   // 根据id获取对应的介绍信息
  //   setTimeout(() => {
  //     this.info = `根据值为${id}的id获取的介绍信息`
  //   }, 1000);
  // },

  watch: {
    $route: {
      handler (value) {
        const id = value.query.id
        // 根据id获取对应的介绍信息
        setTimeout(() => {
          this.info = `根据值为${id}的id获取的介绍信息`
        }, 1000);
      },
      immediate: true,  // 需要让请求的操作在初始化和id参数更新时, 都会执行
    },
    
  }
}
</script>

<style scoped>

</style>
